<template>
    <div>
      <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft"/>
      <ul>
         <li>
            <img :src="prodinfo.images[0]" alt="" style="width: 100px;height: 100px;">
            <div style="display: flex;flex-direction: column;">
               <p style="width: 190px;height:42px;overflow: hidden;
               text-overflow: ellipsis;color: #555;font-size: 14px;">{{ prodinfo.title }}
               </p>
               <span style="position: absolute;right: 0;top: 65px;color: #555;font-size: 14px;">￥{{ orderinfo.products_price }}</span>
               <p>
                  <span style="color: grey;font-size: 12px;">{{ prodinfo.attributes }}</span>
                  <span style="position: absolute;right: 20px;color: grey;font-size: 12px;">x{{ prodinfo.quantity }}</span>
               </p>
            </div>
         </li>
         <li style="width: 95%;margin: 10px auto;display: flex;justify-content: space-between;color: grey;font-size: 14px;">
            <span>订单编号</span>
            <span>{{ orderinfo.order_sn }}</span>
         </li>
         <li style="width: 95%;margin: 10px auto;display: flex;justify-content: space-between;color: grey;font-size: 14px;">
            <span>订单状态</span>
            <span>{{ orderinfo.state_tip }}</span>
         </li>
         <li style="width: 95%;margin: 10px auto;display: flex;justify-content: space-between;color: grey;font-size: 14px;">
            <span>商品总价</span>
            <span>￥{{ orderinfo.products_price }}</span>
         </li>
         <li style="width: 95%;margin: 10px auto;display: flex;justify-content: space-between;color: grey;font-size: 14px;">
            <span>运费</span>
            <span>￥{{ orderinfo.delivery_price }}</span>
         </li>
         <li style="color:#fa436a;width: 95%;margin: 5px auto;display: flex;justify-content: space-between;font-size: 14px;">
            <span>优惠</span>
            <span>-￥{{ orderinfo.discount_price }}</span>
         </li>
         <li style="border-bottom: 1px solid #CCCCCC;padding-bottom: 5px;width: 95%;margin: 5px auto;display: flex;justify-content: space-between;font-size: 16px;">
            <span>订单总价</span>
            <span>￥{{ orderinfo.order_price }}</span>
         </li>
         <li style="font-weight: 600;width: 95%;margin: 5px auto;display: flex;justify-content: space-between;font-size: 16px;">
            <span>实付款</span>
            <span>￥{{ orderinfo.payed_price }}</span>
         </li>
      </ul>
    </div>
</template>
<script>
import {orderInfo} from "@/api/order"
export default {
   data() {
      return {
         orderinfo:{},
         prodinfo:{}
      }
   },
   created(){
      orderInfo(this.$route.query).then(res=>{
         console.log(res.data.data);
         this.orderinfo = res.data.data;
         this.prodinfo = this.orderinfo.products[0]
      })
   },
   computed:{
   },
   methods:{
      onClickLeft(){
         this.$router.go(-1);
      }
   },
}
</script>
<style scoped>
   ul li{
      display: flex;
   }
   
</style>
